<template>
	<view class="pageview flex flex-direction">
		<view class="top-wrap">
			<tabs @changeTab="changeTab"></tabs>
		</view>
		<view class="main flex-sub">
			<view class="card">
				<timebar :timeType="timeType" @updateData="updateData" ref="timebar"></timebar>
				<view class="weightCount" v-if="timeType == 'date'">
					<view class="weightbar">
						<weightStep size="lg" :bmi="bmi"></weightStep>
					</view>
					<view class="flex align-center grid">
						<view class="flex-sub">
							<view class="w-title grid-text">体重</view>
							<view class="w-num">{{weight||'--'}}</view>
						</view>
						<view class="flex-sub">
							<view class="w-title grid-text">BMI</view>
							<view class="w-num">{{bmi||'--'}}</view>
						</view>
						<view class="flex-sub">
							<view class="w-title grid-text">体脂率</view>
							<view class="w-num">{{bfr||'--'}}</view>
						</view>
					</view>
				</view>
				<template v-else>
					<weightChart ref="weightChart"></weightChart>
					<view class="tabs flex align-center">
						<view class="tab-item flex-sub" @tap="changeWeightTab(index)" :class="{ active: curIndex == index }"
							v-for="(item, index) in tablist" :key="index">
							{{ item }}
						</view>
					</view>
				</template>
			</view>
			<view class="card count" v-if="timeType == 'date'">
				<u-grid :border="true">
					<u-grid-item v-for="(item, index) in weightInfo" :key="index">
						<view class="w-title grid-text">{{ item.text }}</view>
						<view class="w-num">{{ item.num||'--' }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<footbar deviceTypeCode="F2Pro"></footbar>
	</view>
</template>

<script>
	import tabs from '@/components/tabs';
	import timebar from '@/components/timebar';
	import weightChart from './components/weightChart.vue';
	import weightStep from '@/components/weightStep';
	import footbar from './components/footbar.vue';
	import {
		mapState
	} from 'vuex';
	import {
		formatEveryDay
	} from '@/utils/index.js';
	import {
		addZero
	} from '@/uni_modules/zxz-uni-datetime-picker/components/zxz-uni-datetime-picker/zxz-util.js';

	export default {
		data() {
			return {
				timeType: 'date',
				tablist: ['体重', 'BMI', '体脂率'],
				curIndex: 0,
				weightData: [],
				weight: '',
				bmi: '',
				bfr: '',
				weightInfo: [{
						value: 'body_age',
						num: '--',
						text: '身高年龄'
					},
					{
						value: 'smPercent',
						num: '--',
						text: '骨骼肌量'
					},
					{
						value: 'bmr',
						num: '--',
						text: '基础代谢'
					},

					{
						value: 'vwc',
						num: '--',
						text: '水分率'
					},
					{
						value: 'pp',
						num: '--',
						text: '蛋白质率'
					},
					{
						value: 'rom',
						num: '--',
						text: '肌肉量'
					},
					{
						value: 'bm',
						num: '--',
						text: '骨量'
					},
					{
						value: 'uvi',
						num: '--',
						text: '内脏脂肪'
					},
					{
						value: 'sfr',
						num: '--',
						text: '皮下脂肪'
					}
				]
			};
		},
		components: {
			tabs,
			timebar,
			weightChart,
			weightStep,
			footbar
		},
		computed: {
			...mapState(['curAccount'])
		},
		created() {},
		methods: {
			updateData(timeInfo) {
				let param = {
					startTime: timeInfo.startDay + ' 00:00:00',
					endTime: timeInfo.endDay + ' 23:59:59',
					type: ['date', 'week', 'yearMonth', 'year'].findIndex(item => item == this.timeType)
				}
				if (this.timeType == 'date') {
					this.getWeightCountByDay(param);
				} else {
					this.getWeightCount(param);
				}

			},
			getWeightCount(param) {
				this.$postAction(this.$deviceapi.getWeightCount, {
					detailId: this.curAccount.detailId,
					...param
				}).then(da => {
					this.weightData = da || [];
					this.updateChart();
				});
			},
			getWeightCountByDay(param) {
				this.$postAction(this.$deviceapi.getWeightCountByDay, {
					detailId: this.curAccount.detailId,
					...param
				}).then(da => {
					if (da && da.length > 0) {
						let details = da[0].data.details;
						this.weightInfo.forEach(item => {
							item.num = details[item.value];
						})
						this.weight = da[0].data.weightData;
						this.bmi = da[0].data.details.bmi;
						this.bfr = da[0].data.details.bfr;
					} else {
						this.weightInfo.forEach(item => {
							item.num = '';
						})
						this.weight = '';
						this.bmi = '';
						this.bfr = '';
					}
				});
			},
			updateChart() {
				let categories = [],
					data = [];
				if (this.timeType == 'date') {
					for (var i = 0; i < 24; i++) {
						categories.push(addZero(i) + ':00');
					}
				} else if (this.timeType == 'year') {
					for (var i = 0; i < 12; i++) {
						categories.push(this.$refs.timebar.yearWeek + '-' + addZero(i + 1));
					}
				} else {
					let list = formatEveryDay(this.$refs.timebar.startDay, this.$refs.timebar.endDay);
					categories = [...list];
				}
				console.log('categories', categories);
				if (this.weightData && this.weightData.length > 0) {
					this.weightData.forEach(item => {
						// categories.push(item.opdate.slice(0, 11));
						if (this.curIndex == 0) {
							data.push(item.weightData || null);
						} else if (this.curIndex == 1) {
							data.push(item.bmi || null);
						} else if (this.curIndex == 2) {
							data.push(item.bfr || null);
						}
					});
				}
				this.$refs.weightChart.getServerData(
					categories,
					[{
						name: this.curIndex == 0 ? '实时体重' : this.curIndex == 1 ? 'BMI' : '体脂率',
						connectNulls: true,
						data: data
					}],
					this.timeType == 'date' ? '' : this.timeType == 'year' ? 'xAxissemester' : 'xAxisDay',
					this.timeType == 'date' ? 5 : this.timeType == 'year' ? 6 : 8
				);
			},
			changeWeightTab(index) {
				if (this.curIndex != index) {
					this.curIndex = index;
					this.updateChart();
				}
			},
			changeTab(info) {
				this.timeType = info.value;
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import 'pro.scss';

	.weightCount {
		.weightbar {
			padding: 60upx 0 0;

			.weight {
				margin-right: 30upx;

				.num {
					font-size: 50upx;
					font-weight: 600;
					color: #333;
				}
			}
		}

		.grid {
			margin: 0 -30upx;
			text-align: center;

			.w-title {
				padding: 25upx 0 20upx;
			}
		}
	}
</style>